分享人:叶紫阳
1.大家在写页面时,会用到各种元素,比如div, img等等。有时候一张页面会放好几张图片,图片如果显示效果都一样,看起来很单调,
整个页面给人的感觉会很硬。那么,怎么能让页面的元素有一种多样化,甚至有一种朦胧美呢?于是,有了opacity和rgba()这两个属性。 其中,opacity属性是css3新提的属性。
2.另外,在看一下display和visibility背景介绍,故名思意,display和visibility是与元素显示有关系的,这两个属性都可以控制元素的 显示与隐藏。
究其作用,我们可以知道,为了提高用户的体验,实现更好的页面甚至元素与用户的互动,当用户开始某个操作时,可以通过display和visibility 这两个属性让元素显示或者隐藏, 或者以哪种方式显示。
3.综上所述;其实某个元素产生的背景和原因,就是为了满足日益增长的用户体验要求。
block:独占一行,可以设置宽高。
inline:表现为一个行级元素(一般情况下不独占一行)
inline-block:不独占一行,但是可以设置宽高。同时具有inline和block的特性。
none:元素不可见,并且不为其保留相应的位置。
hidden 元素不可见,但仍然为其保留相应的空间
visible 元素可见,默认值
collapse 只对table对象起作用,能移除行或列但不会影响表格的布局。
visibility:inherit 继承上级元素的visibility值
dispaly和visibility二者的区别:
display:none 元素不可见,在文档流中不占据空间
visibility:hidden 元素不可见,但是占据空间
点我还有一点是,从visibility:hidden转换为visibility:visible时比display:none转换为display:block性能要好, 因为display在切换可见性时,文档流会重新书写,所以visibility:visible性能更好。
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
A:透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。
正整数为十进制0~255之间的任意值,百分数为0%~100%之间的任意值。
RGBA是在R(Red)G(Green)B(Blue)模式上增加了alpha通道,alpha通道是不透明度,即,如果一个元素的alpha通道数值为0%(或0), 那该元素就是完全
透明的(也就是看不见的,但是可以透过该元素看到该元素下的元素),数值为100%(或255)时则意味着该元素完全不透明。
例子:rgba(55,146,179,.5) ; //rgb值为“55,146,179”,.5使设定的rgb值为50%透明,1为完全不透明,0为完全透明
opacity属性是CSS3的属性,设置元素的不透明级别
取值说明: value 不透明度,从0.0(完全透明)到1.0(完全不透明)。
注意:IE8以及更早版本支持替代的filter属性。例如:filter: Alpha(opacity=50);
.rgba {
background: rgba(255,0,0,0.5);
}
.opacity {
background : red ; opacity: 0.5;
}
然后,RGBA和opacity都是用来设置元素的不透明度的,那么两者有什么区别呢?
opacity会继承父元素的opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性。
简单来说就是opacity作用于元素和元素所有内容的透明,看一下例子
rgba和opacity的区别所以,rgba相对于opacity还是技高一筹的,当然只要是涉及颜色的,都可以用rgba来设置。比如background-color,text-shadow, box-shadow。
透明度的兼容性
一般主流的浏览器都支持这两个属性,我们需要注意的是旧版本的ie浏览器
旧版本的ie浏览器提供了filter这一属性,下面是兼容性写法
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
属性的应用
参考一:DIV中display和visibility属性差别
参考二:rgba与opacity区别小解
除此之外,还有哪些比较巧妙的用法?
感谢大家观看
BY : 沁修 | 火山 | 叶紫阳